<template>
    <view class="page project_box">
        <view class="project pd-20" @click="goProjectDetail(item.id)" v-for="item in dataList" :key="item.id">
            <view class="flex">
                <view class="left">
                    <image style="border-radius: 40rpx;" class="img wh-100" :src="item.cover" mode="aspectFill"></image>
                </view>
                <view class="right ml-20">
                    <view class="top mt-20">
                        <view class="flex fs0" style="overflow: hidden;">
                            <view class="flex" v-if="item.recommends_show">
                                <view class="tip ft ft-20 flex-center fs0" v-for="(tag, index) in item.recommends_show"
                                    :key="index">
                                    {{ tag }}
                                </view>
                            </view>
                            <view style="width: 240rpx;" class="title  ft-lue ft ft-32 fw-800">{{
                                item.name
                                }}</view>
                        </view>

                    </view>
                    <view class="midel mt-4">
                        <text class="ft c-99" v-for="(tag, index) in item.tags" :key="index">
                            <text v-if="index === item.tags.length - 1">{{ tag.name }}</text>
                            <text class="mr-4" v-else>{{ tag.name }}<text class="ml-4">|</text></text>
                        </text>
                    </view>
                    <view class="domn_box flex-bwt mt-20">
                        <view class="domn flex mt-20">
                            <view class="price pd-10">
                                <view class="ft">白菜价</view>
                                <text class="ft-20 c-33 fw-800 mt-8">
                                    {{ item.currency_symbol }}
                                    <text class="ft-28 c-33 ft-eng">
                                        {{ item.bc_price_show }}</text>
                                    {{ item.bc_price_unit }}</text>
                            </view>
                            <image class="wh-37" v-if="item.peer_price_show" style="margin: 0 20rpx;"
                                src="https://cdn.oss.bon-top.cn/static_bc/images/price1.png"></image>
                            <view class="price2  pd-10" v-if="item.peer_price_show">
                                <view class="ft c-99">同行价</view>
                                <text style="font-weight: 800; font-size: 20rpx; color: #999999">
                                    {{ item.currency_symbol }}
                                    <text class="ft-28 c-99 ft-eng">
                                        {{ item.peer_price_show }}</text>
                                    {{ item.peer_price_unit }}</text>
                            </view>
                        </view>
                        <view class="domn_box_btn" v-if="app?.globalData?.isTeacherAdd"
                            :class="projectArr.includes(item.id) ? 'domn_box_btnNoadd' : ''"
                            @click.stop="addProject(item)">{{ projectArr.includes(item.id) ? '取消' : '选为推荐' }}
                        </view>

                    </view>
                </view>
            </view>
            <view class="foot auto mt-20 flex-bwt">
                <view class="arrow ml-12">
                    <text class="ft c-99" v-if="item.brand_info">{{ "项目方:" + item.brand_info.name }}</text>
                    <text class="ft" v-else>{{ "项目方:暂无数据" }}</text>
                </view>
                <view class="down flex mr-12">
                    <image class="wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/icon12.png"></image>
                    <text class="ft" style="margin-left: 8rpx" v-if="item.country_info"> {{ item.country_info.name
                        }}</text>
                    <text class="ft" style="margin-left: 8rpx" v-else> {{ '暂无数据' }}</text>
                </view>
            </view>

        </view>
        <u-loadmore v-if="isLoad" :status="loadmoreList.status" :loading-text="loadmoreList.loadingText"
            :loadmore-text="loadmoreList.loadmoreText" :nomore-text="loadmoreList.nomoreText" />

        <view :style="{ height: (98 + 68) + 'rpx' }"></view>
        <view class="btn_box" v-if="projectIshow">
            <view class="box flex-bwt" style="height: 98rpx;">
                <view class="btn_left ft-24 c-33">
                    已选({{ projectArr.length }})
                </view>
                <view class="flex">
                    <view class="btn mr-20">查看</view>
                    <view class="btn add">添加</view>
                </view>
            </view>

        </view>
    </view>
</template>
<script setup lang="js">
import { onReachBottom } from '@dcloudio/uni-app';
import { onMounted, reactive, ref } from 'vue';
let prop = defineProps(['dataList', 'pageInfo', 'dataObj'])
let { dataList, dataObj, pageInfo } = prop
let emit = defineEmits('getProjectList')
let loadmoreList = reactive({
    status: "loadmore",
    loadingText: "加载中~",
    loadmoreText: "加载更多",
    nomoreText: "没有更多了",
})
let isLoad = ref(true)
let app = getApp()


const projectArr = ref([])
const projectIshow = ref(false)
projectIshow.value = app.globalData.isTeacherAdd
projectArr.value = app.globalData.projectArr

console.log('app.globalData', app.globalData)

const addProject = (item) => {
    let arr = app.globalData.projectArr
    console.log(arr.indexOf(item.id))

    if (arr.indexOf(item.id) !== -1) { //数据已经存在 删除
        arr = arr.filter((f, i) => i !== arr.indexOf(item.id))
    } else {
        arr.push(item.id)
    }
    app.globalData.projectArr = [...new Set(arr)]
    projectArr.value = app.globalData.projectArr
    // uni.setStorageSync('projectArr', [...new Set(arr)])
    console.log('projectArr.value', projectArr.value)
}
onMounted(() => {

    if (!pageInfo) return isLoad.value = false
    if (pageInfo.page >= dataObj.pageInfo?.totalPage) {
        loadmoreList.status = 'nomore'

    } else { loadmoreList.status = 'loadmore' }
    // 选择推荐项目逻辑
    if (projectIshow.value) {
        projectArr.value = app.globalData.projectArr

    }
})
onReachBottom(() => {
    console.log('触底')
    if (!pageInfo) return isLoad.value = false
    if (pageInfo.page >= dataObj.pageInfo?.totalPage) {
        loadmoreList.status = 'nomore'
        console.log("我没了")
    } else {
        loadmoreList.status = 'loading'
        pageInfo.page++
        setTimeout(() => {
            emit('getProjectList')
            loadmoreList.status = 'loadmore'

        }, 500)
    }
})
const goProjectDetail = (id) => {
    uni.navigateTo({
        url: `/subpackage/immigration/immigration?id=${id}`,
    });
};
</script>
<style lang="scss" scoped>
.project_box {
    // padding: 0 20rpx;
    box-sizing: border-box;
}

.project {
    margin: auto;
    margin-top: 10rpx;
    margin-bottom: 20rpx;
    // width: 650rpx;
    height: 408rpx;
    background: #ffffff;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    border: 2rpx solid #f1f1f1;

    .left {
        width: 222rpx;
        height: 274rpx;
        border-radius: 40rpx 40rpx 40rpx 40rpx;
    }

    .right {
        flex: 1;
        height: 274rpx;

        .top {
            .tip {
                // width: 88rpx;

                height: 36rpx;
                display: inline-block;
                line-height: 36rpx;
                box-sizing: border-box;
                background: linear-gradient(88deg, #dbf046 0%, #ffee7e 100%);
                border-radius: 8rpx 8rpx 8rpx 8rpx;
                margin-right: 4rpx;
                padding: 0 4rpx;

            }

            .title {
                margin-left: 6rpx;
            }
        }

        .domn {
            .price {
                // width: 148rpx;
                height: 92rpx;
                background: linear-gradient(90deg,
                        #fff5f3 0%,
                        rgba(255, 245, 243, 0) 100%);
                border-radius: 20rpx 20rpx 20rpx 20rpx;
            }

            .price2 {
                // width: 148rpx;
                height: 92rpx;
                background: #fff;
                border-radius: 20rpx 20rpx 20rpx 20rpx;
            }
        }

        .domn_box_btn {
            font-size: 24rpx;
            color: #DBF046;
            width: 136rpx;
            height: 58rpx;
            line-height: 58rpx;
            text-align: center;
            background: #333333;
            border-radius: 20rpx 20rpx 20rpx 20rpx;
        }

        .domn_box_btn.domn_box_btnNoadd {
            color: #fff;

        }


    }

    .foot {
        width: 610rpx;
        height: 74rpx;
        background: linear-gradient(92deg, #f8f8f8 0%, rgba(248, 248, 248, 0) 100%);
        border-radius: 40rpx 40rpx 40rpx 40rpx;
    }
}

.btn_box {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    box-sizing: border-box;
    background-color: #F8F8F8;
    padding-bottom: calc(10rpx + env(safe-area-inset-bottom));

    .btn_left {
        width: 132rpx;
        height: 54rpx;
        background: #FFFFFF;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        line-height: 54rpx;
        text-align: center;
    }

    .btn {
        width: 192rpx;
        height: 78rpx;
        background: #F1F1F1;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        text-align: center;
        line-height: 78rpx;
        font-size: 28rpx;

    }

    .box {
        padding: 0 30rpx;
        box-sizing: border-box;
        height: 98rpx;


        .add {
            color: #DBF046;
            background-color: #333333;
        }

    }
}
</style>